<%-- 
    Document   : CadastroUsuario
    Created on : 13/09/2014, 09:06:23
    Author     : luiz
--%>

<%@page import="entidade.Estado"%>
<%@page import="dao.EstadoDAO"%>
<%@page import="entidade.EnumSexo"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <script src="js/javascript.js" type="text/javascript"></script>
        <script src="ajax/ajax.js" type="text/javascript"></script>
        <script src="ajax/jquery-1.3.2.js" type="text/javascript"></script>
        <script src="jquery-1.5.2.min.js" type="text/javascript"></script>
        <script src="js/foundation/foundation.abide.js" type="text/javascript"></script>
        <link rel="stylesheet" type="text/css" href="css/foundation.css">
        <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <link rel="stylesheet" type="text/css" href="css/foundation/foundation.min.css">
        <link rel="stylesheet" type="text/css" href="css/foundation/normalize.css">
        <script src="js/prefixfree-1.0.7.js"></script>
        <script src="js/jquery-1.11.1.min.js"></script>
        <script src="js/jquery-1.7.1.min.js" ></script>
        <script src="js/foundation.min.js"></script>
        <script src="js/script.js"></script>
    </head>
    <body class="fundo">
        <div class="menu_interno">
            <div class="menu_interno_logo">
                <img src="imagens/logo.png">
            </div>
            <div class="menu_interno_list">

            </div>
            <div class="menu_interno_rodape">
                <a href="sistema/principal.jsp"><img src="imagens/back.png"></a>

            </div>
        </div>
        <div id="container" class="content" style="width: 75%;">
            <div class="margintop_content">
                <form method="post" action="CadastroUsuarioServlet">
                    <fieldset>
                        <legend>Cadastro De Usuário</legend>

                        <div class="row">
                            <div class="large-12 columns">                        
                                <label for="nome">Nome</label>
                                <input type="text" name="nome" required/>
                            </div>
                        </div>

                        <div class="row">
                            <div class="large-4 columns">
                                <label for="nascimento">Nascimento</label>
                                <input type="date" name="nascimento" />
                            </div>
                            <div class="large-4 columns">
                                <label for="sexo">Sexo</label>
                                <select id="sexo" name="sexo">
                                    <option value="">Selecione</option>  
                                    <%for (EnumSexo e : EnumSexo.values())
                                        {%>
                                    <option value="<%=e%>"><%=e.getSexo()%></option>  
                                    <%}%>
                                </select>
                            </div>
                            <div class="large-4 columns">
                                <label for="cpf">CPF</label>
                                <input type="text" name="cpf" size="11" maxlength="14" onkeypress="mascaraCPF(this)"> 
                            </div>
                        </div>
                        <div class="row">
                            <div class="large-8 columns">
                                <label for="email">Email</label>
                                <input type="email" name="email" required />
                            </div>
                        </div>
                        <div class="row">
                            <div class="large-4 columns">
                                <label for="senha">Senha</label>
                                <input type="password" maxlength="20" name="senha" required/>
                            </div> 
                            <div class="large-4 columns">
                                <div class="field">
                                    <label for="passord">Confirma Senha</label>
                                    <input type="password" maxlength="20" name="confirmaSenha" required />
                                </div> 
                            </div>
                            <div class="large-4 columns"></div>
                        </div>
                        <div class="row">
                            <div class="large-4 columns">
                                <label for="telefone">  Telefone</label>
                                <input type="text" name="telefone" size="20" maxlength="15" onkeypress="mascaraFONE(this)"> 
                            </div>
                            <div class="large-4 columns">
                                <label  for="celular">Celular</label>
                                <input type="text" name="celular" size="20" maxlength="15" onkeypress="mascaraFONE(this)"> 
                            </div>
                            <div class="large-4 columns"></div>
                        </div>
                        <div class="row">
                            <hr/>
                        </div>
                        <div class="row">
                            <div class="large-4 columns">
                                <label for="cep">CEP
                                    <img src="img/search-icon.gif" alt="Pesquisar" border="0" onclick="paginaAjax('CEP/busca.jsp?cep=' + cep.value, 'endereco')" >
                                    <input id ="cep" name="cep" size="20" maxlength="10" type="text" onkeypress="mascaraCEP(this)"/>  
                                </label>
                            </div>
                        </div>    
                        <div id="endereco">
                            <div class="row">
                                <div class="large-8 columns">
                                    <label for="endereco">Endereço</label>
                                    <input id="endereco" name="endereco" size="30" type="text" />
                                </div>
                                <div class="large-4 columns">
                                    <label for="numero">Numero</label>
                                    <input id="numero" name="numero" size="30" type="text" />
                                </div>
                            </div>
                            <div class="row">
                                <div class="large-6 columns">       
                                    <label for="bairro">Bairro</label>
                                    <input id="bairro" name="bairro" size="30" type="text" />
                                </div>

                                <div class="large-6 columns">     
                                    <label for="complemento">Complemento</label>
                                    <input id="complemento" name="complemento" size="30" type="text" />
                                </div></div>
                            <div class="field">
                                <div class="row">
                                    <div class="large-6 columns">         
                                        <label for="estado">Estado:</label>
                                        <select id="estado" name="estado" 
                                                onchange="paginaAjax('ajax/cidade.jsp?tipo=estado&estado=' + this.value, 'cidade')">
                                            <option value="0">Escolha um Estado</option>
                                            <% EstadoDAO estadoDAOs = new EstadoDAO();
                                                for (Estado e : estadoDAOs.buscar(Estado.class))
                                                {%>
                                            <option value="<%=e.getId()%>"><%=e.getNome()%></option>
                                            <%}%>
                                        </select>
                                    </div>
                                    <div class="large-6 columns">  

                                        <div id="cidade">
                                            <label for="cidade">Cidade:</label> 
                                            <select id="cidade" name="cidade" disabled>
                                                <option>Escolha uma Cidade</option>    
                                            </select>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </fieldset>
                    <br>

                    <br>
                    <div style="float:left;">
                        <button type="submit">Gravar</button>
                    </div>
                    <div style="float:left;">
                        <button type="reset">Limpar</button>                       
                    </div>
                </form>
            </div>
        </div>

    </body>
</html>
